<template>
    <div class="login">
       <el-form ref="form" :model="form" :rules="rules"  class="container" >
           <el-form-item prop="username" style="margin-top:35px">
             <el-input v-model="form.username" placeholder="账号" prefix-icon="myicon myicon-user"></el-input>
           </el-form-item>
           <el-form-item prop="password">
             <el-input v-model="form.password" placeholder="密码" prefix-icon="myicon myicon-key" type="password"></el-input>
           </el-form-item>
           <el-form-item >
             <el-button type="primary" class="login-btn" @click="loginSubmit()">登录</el-button>
           </el-form-item>
       </el-form>
    </div> 
</template>


<script>
import {checkUser} from '@/api'

export default {
     data() {
        return {
            form:{
                username:'',
                password:''
            },
            rules:{
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    //自定义验证规则
                    // { validator: userValidate, trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]     
            }
        }
     
    },
    methods:{
        loginSubmit(){
       
            this.$refs.form.validate((valid)=>{
                if(valid){
                    // console.log('登录')
                    checkUser(this.form).then(res=>{
                        if (res.meta.status === 200){
                            this.$router.push({name:'Index'})
                        }else{
                            this.$message({
                                type:'error',
                                message:res.meta.msg
                            })
                        }
                    })
                }else{
                    console.log('error')
                    return false
                }
            })
            
        },
    }
}
</script>



<style scoped>
.login {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #2f4050;
  }
.login .container {
      position: absolute;
      left: 0;
      right: 0;
      width: 400px;
      padding: 0px 40px 15px 40px;
      margin: 200px auto;
      background: white;
      
  }
  .login .container el-input{
      margin-left:auto;
      margin-right:auto;
  }
  .login .container .login-btn { width: 100%; }
</style>